
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> - Bootstrap Table</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/static/css/animate.css" rel="stylesheet">
    <link href="/static/css/style.css?v=4.1.0" rel="stylesheet">

    <!--  jsTree -->
    <link href="/static/js/plugins/jsTree/dist/themes/default/style.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal m-t" id="main_form" action="/permission" method="post">
        <#if type == 'edit'>
           <input type="hidden" name="_method" value="put">
           <input type="hidden" name="permissionId" value="${user.userId}">
        </#if>
        <div class="form-group">
            <label class="col-sm-3 control-label"> 用户名 </label>
            <div class="col-sm-8">
                <input id="username" name="username" class="form-control" type="text" autocomplete="off" value="${user.username!}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"> 密码 </label>
            <div class="col-sm-8">
                <input id="password" name="password" class="form-control" type="password" autocomplete="off">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"> 电话 </label>
            <div class="col-sm-8">
                <input id="phone" name="phone" class="form-control" type="text" autocomplete="off">
            </div>
        </div>

        <div class="form-group ">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-8 control-label">
                <input type="button" id="cancel" class="btn btn-w-m btn-primary" value="取消" />
                <input type="submit" id="confirm" class="btn btn-w-m btn-primary" alt="doAdd" value="确定" />
            </div>
        </div>

    </form>
</div>


<!-- 全局js -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- jQuery Validation plugin javascript-->
<script src="/static/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/static/js/plugins/validate/messages_zh.min.js"></script>

<!-- layer -->
<script src="/static/js/plugins/layer/layer.min.js"></script>

<!--  jsTree -->
<script src="/static/js/plugins/jsTree/dist/jstree.js"></script>
<!--  表单序列化 -->
<script src="/static/js/plugins/formSerialize/formSerialize.js"></script>
<script >


    //自定义手机号验证代码
    jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请输入正确的手机号码");


    //以下为修改jQuery Validation插件兼容Bootstrap的方法，没有直接写在插件中是为了便于插件升级
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        success: function (element) {
            element.closest('.form-group').removeClass('has-error').addClass('has-success');
        },
        errorElement: "span",
        errorPlacement: function (error, element) {
            if (element.is(":radio") || element.is(":checkbox")) {
                error.appendTo(element.parent().parent().parent());
            } else {
                error.appendTo(element.parent());
            }
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    });



    var selectMenuId;
    var parentMenuName;

    var parentIndex;
    $(function(){

        //$("#main_form").validate();

        $("#main_form").validate({
            onsubmit:true,// 是否在提交时验证
            onfocusout:false,// 是否在获取焦点时验证
            onkeyup :false,// 是否在敲击键盘时验证
            rules: {　　　　//规则
                username: {　　//要对应相对应的input中的name属性
                    required: true
                },
                password: {　　//要对应相对应的input中的name属性
                    required: true
                },
                phone: {
                    required: true,
                    isMobile:true
                }
            },
            messages:{　　　　//验证错误信息
                permissionName: {　　//要对应相对应的input中的name属性
                    required: "请输入用户名"
                },
                permission: {　　//要对应相对应的input中的name属性
                    required: "请输入密码"
                },
                url: {
                    required: "请输入手机号"
                }
            },
            submitHandler: function(form) { //通过之后回调
//进行ajax传值
                    doAdd();
            },
            invalidHandler: function(form, validator) {
                return false;
            }
        });

        $("#cancel").click(function(){
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        });


        function doAdd(){
            $.ajax({
                url : "/user",
                type : "post",
                dataType : "json",
                data: $("#main_form").serializeObject(),
                success : function(msg) {
                    //要执行的代码
                    console.log($("#main_form").serializeObject());
                    if(msg.data == true){
                        //调用父页面方法
                        parent.flushTable();
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                        layer.msg("添加成功");
                    } else {
                        layer.msg("添加失败:"+ msg.data);
                    }
                }
            });
        }
    });

</script>


</body>
</html>
